<template>
  <view class="detail-container">

    <view class="artworks-sort-tips">
      <u-notice-bar mode="horizontal" type="warning" :list="notList"></u-notice-bar>
    </view>

    <AllArtworksList
      v-if="info"
      :artworks-type="info.type"
      :artworks-list="artworksList"
      @handleCheckBox="handleCheckBox"
      @handleArtworks="handleWechatCircleArtworks"/>

    <!-- 操作栏 -->
    <!-- #ifdef H5 -->
    <view class="bottom-main">
      <view class="bottom-view">
        <block>
          <view @click="goBack()" class="bottom-view-button bottom-view-button-margin0">
            <text class="huiju-iconfont huiju-icon-fanhui1"></text>
            <text class="bottom-view-button-text">返回上一页</text>
          </view>
        </block>
      </view>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
  import { materialAlbumDetailById } from '@/api/artworks';
  import AllArtworksList from './components/allArtworksList.vue';
  export default {
    components: {
      AllArtworksList,
    },
    data() {
      return {
        artworksList: [],
        info: null,
        notList: [ '长按图片即可保存至手机' ]
      }
    },

    onLoad(options) {
      this.getMaterialAlbumDetailById(options.id);
    },

    methods: {
      getMaterialAlbumDetailById(id) {
        materialAlbumDetailById({ id }).then(result => {
          if (result && result.data) {
            this.artworksList = result.data.image_list;
            this.info = result.data;
          }
        })
      },

      // 返回
      goBack() {
        uni.navigateBack({
          delta: 1
        })
      },
    }
  }
</script>

<style lang="scss">
  .detail-container{
    padding: 24rpx;

    .artworks-sort-tips{
      margin-bottom: 24rpx;
    }

    .bottom-main{
      position: fixed;
      bottom: calc(var(--window-bottom) + 60rpx);
      z-index: 20;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      z-index: 2;

      .bottom-view{
        display: flex;
        justify-content: center;
        min-width: 260rpx;
        padding: 24rpx 30rpx;
        background: #fff;
        border: 2rpx solid $uni-color-primary2;
        border-radius: 92rpx;

        &-button{
          color: $uni-color-primary;
          font-size: 24rpx;
          position: relative;
          white-space: nowrap;

          &-text{
            color: $uni-color-primary;
            padding-left: 6rpx;
          }
        }

        &-button-before{
          &::before{
            content: "";
            position: absolute;
            right: 0;
            width: 2rpx;
            height: 32rpx;
            background: #e9e9e9;
          }
        }

        &-button-padding{
          padding-right: 16rpx;
          margin-right: 16rpx;
        }

        &-button-margin0{
          margin-right: 0;
          padding-right: 0;
        }
      }
    }
  }
</style>
